<template>
  <div class="index">
    <div class="head">
      <div>
        <svg class="logo" aria-hidden="true">
          <use xlink:href="#icon-zhaopian-copy"></use>
        </svg>
        <h2 class="title">Speed</h2>
      </div>
      <span class="brief">移动端、快速开发组件库</span>
    </div>
    <div class="index-title">基础组件</div>
    <div class="button-group">
      <div class="button" v-for="(item, index) in buttonList" :key="index" @click="goPage(item.name)">
        <span>{{item.title}}</span>
        <div class="iconfont">&#xe7e7;</div>
      </div>
    </div>
    <div class="index-title">业务组件</div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      buttonList: [
        {
          title: 'Button 按钮',
          name: 'Button',
        },{
          title: 'Popup 弹出层',
          name: 'Popup',
        },{
          title: 'Dialog 弹出框',
          name: 'Dialog',
        },{
          title: 'Cell 单元格',
          name: 'Cell',
        },{
          title: 'NavBar 导航',
          name: 'NavBar',
        },{
          title: 'ShareSheet 分享面板',
          name: 'ShareSheet',
        },{
          title: 'Search 搜索框',
          name: 'Search',
        },{
          title: 'Input 输入框',
          name: 'Input',
        },{
          title: 'Stepper 步进器',
          name: 'Stepper',
        },{
          title: 'ActionSheet 动作面板',
          name: 'ActionSheet',
        },{
          title: 'Tab 标签栏',
          name: 'Tab',
        },{
          title: 'GridIcon 网格图标',
          name: 'GridIcon',
        },{
          title: 'Skeleton 骨架屏',
          name: 'Skeleton',
        },{
          title: 'Swiper 轮播图',
          name: 'Swiper',
        }
      ]
    }
  },
  methods: {
    goPage(name) {
      this.$router.push({name});  
    }
  },
};
</script>

<style lang="scss" scoped>
  .index {
    padding: 30px 20px;

    .head {
      padding: 0 10px;

      >div {
        display: flex;
        align-items: center;

        .logo  {
          width: 3.5em;
          height: 3.5em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        
        .title {
          font-size: 26px;
          line-height: 1;
          font-weight: 400;
          margin-left: 15px;
        }
      }

      .brief {
        display: block;
        color: rgba(69, 90, 100, 0.6);
        font-size: 14px;
        margin-top: 10px;
      }

      .sub-text {
        display: block;
        color: rgba(69, 90, 100, 0.6);
        font-size: 14px;
        margin-top: 5px;
      }
    }

    .index-title {
      padding-left: 10px;
      margin-top: 30px;
      color: rgba(69, 90, 100, 0.6);
      font-weight: normal;
      font-size: 14px;
      line-height: 16px;
    }

    .button-group {
      margin-top: 15px;

      .button {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 0 0 12px;
        padding: 0 15px 0 20px;
        color: #323233;
        font-size: 14px;
        line-height: 40px;
        border-radius: 99px;
        background: #f7f8fa;

        .iconfont {
          color: #ccc;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
</style>
